<template>
	<view class="container">
		<button class="wrapper" @click="addImage">
			<image v-if="avatarUrl" class="avatar" :src="avatarUrl"></image>
			<image v-if="!avatarUrl" class="avatar"
				src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0">
			</image>

		</button>
		<view class="nick">
			<view class="text">
				昵称：
			</view>
			<input class="weinput" placeholder="请输入昵称" v-model="nickName" @blur="onNickName" />
		</view>
		<button type="primary" plain="true" class="btn" @click="toadd">确认</button>

	</view>
</template>

<script>
	import {
		updateUserInfo
	} from '../../request/api.js'
	export default {
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: ''
			}
		},
		onLoad() {
			const globalValue = uni.getStorageSync('userInfo');
			this.avatarUrl = globalValue.pictureUrl
			this.nickName = globalValue.nickname
		},
		methods: {
			addImage() {
				const _this = this;

				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					// uni.showLoading({
					// 	mask: true,
					// 	title: '上传中...'
					// }),
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择

					success: (res) => {
						console.log(res);
						uni.previewImage({
							urls: res.tempFilePaths,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://www.land.xbaoziplus.top/api/cos/upload',
							filePath: tempFilePaths[0],
							header: {
								'token': uni.getStorageSync('token'),
							},
							name: 'multipartFile',
							success: function(uploadFileRes) {
								console.log(JSON.parse(uploadFileRes.data));
								// console.log(JSON.parse(uploadFileRes.data).data[0]);
								// _this.imgList = [..._this.imgList, uploadFileRes.data]
								_this.avatarUrl = JSON.parse(uploadFileRes.data).data
								// console.log(_this.avatarUrl);


							}
						})
					}
				})
			},
			toadd() {
				updateUserInfo({
					nickname: this.nickName,
					pictureUrl: this.avatarUrl
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.setStorageSync('nickname', this.nickName);
						uni.setStorageSync('pictureUrl', this.avatarUrl);
						uni.setStorageSync('changeNum', '3');

						uni.switchTab({
							url: '/pages/my/my'
						})

					} else {
						uni.showToast({
							title: '请填写头像和昵称',
							icon: 'none',
							duration: 2000
						});


					}
				}).catch()
			},
			uploadFilePromiseee() {
				const tempFilePaths = res.tempFilePaths;
				const uploadTask = uni.uploadFile({
					url: 'https://www.land.xbaoziplus.top/api/cos/upload',
					filePath: tempFilePaths[0],
					header: {
						'token': uni.getStorageSync('token'),
					},
					name: 'multipartFile',
					success: function(uploadFileRes) {
						console.log(uploadFileRes);
						// _this.imgList = [..._this.imgList, uploadFileRes.data]
						// _this.frominfo.urlList.push(JSON.parse(uploadFileRes.data).data[0])
						// console.log(_this.frominfo.urlList);


					}
				})
			},
			onChooseAvatar(e) {
				// this.avatarUrl = e.detail.avatarUrl
				this.uploadFilePromise(e.detail.avatarUrl)
				// console.log(this.nickName);
			},
			onNickName(e) {
				console.log(e);
			},
			uploadFilePromise(value) {
				wx.uploadFile({
					url: 'https://example.weixin.qq.com/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					success(res) {
						const data = res.data
						//do something
						completeMemberInfo(res.data.avatarUrl) //参数返回依接口而定
					}
				})
			},
			//接收 avatarUrl / nickName
			completeMemberInfo(url) {
				//接收 avatarUrl / nickName 调接口完善头像信息
				console.log(url);
			},

		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 93vh;
		text-align: center;
		// background-color: rgb(242, 242, 242);
		padding: 5vh 0 0 0;
	}

	.wrapper {
		width: 70px;
		height: 70px;

		.avatar {
			width: 100%;
			height: 100%;
		}

	}

	.nick {
		width: 93%;
		margin-top: 5vh;
		margin: 5vh 3vw;
		padding: 2vh 0;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;

		.text {
			display: inline-block;
			font-size: 16px;
			vertical-align: middle;
		}

		.weinput {
			display: inline-block;
			font-size: 16px;
			vertical-align: middle;
		}

	}

	.btn {
		width: 50%;
	}
</style>
